<template>
	<Layout :showBack="true" :innerBottom="false">
		<template #title>分享码</template>
		<view class="iflex asc column share-code">
			<image class="share-code-bg" src="/static/image/mine/share-code.bg.png"></image>
			<view class="flex column aic share-code-wrap">
				<view class="iflex share-code__portrait">
					<image :src="info.avatar"></image>
				</view>
				<view class="iflex share-code__name">{{info.nickname}}</view>
				<view class="iflex aic jcc share-code__qrcode">
					<view class="iflex aic jcc share-code__qrcode__inner">
						<image class="qrimage" :style="qrimageStyle" :src="info.qrImage"
							@bindlongpress="longPressHandler" show-menu-by-longpress="true"></image>
					</view>
				</view>
			</view>
		</view>
	</Layout>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue';
	import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
	import { getBrokerageInfo } from '@/apis/auth';
	let wxUserId = '';
	const info = ref<any>({
		nickname: '',
		avatar: '',
		qrImage: ''
	});

	const qrimageStyle = computed(() => {
		// return { background: `url('${info.value.qrImage}') no-repeat center center`, backgroundSize: '350rpx 350rpx' }
		return {}
	});

	function loadData() {
		getBrokerageInfo(wxUserId).then((res) => {
			info.value = res.data ?? {}
		});
	}

	onShareAppMessage(() => {
		return {
			title: info.value.nickname ?? '分享码',
			path: `/pages/mine/share-code?wxUserId=${wxUserId}`
		}
	});

	onShareTimeline(() => {
		return {
			title: info.value.nickname ?? '分享码',
			query: `wxUserId=${wxUserId}`
		}
	});

	function longPressHandler() {

	}

	onLoad((options) => {
		options = options as { wxUserId : string; }
		wxUserId = options.wxUserId;
		console.log('==== share-code.options ====', options);
		loadData();
	})
</script>

<style lang="scss">
	.share-code {
		margin-top: 50rpx;
		width: 686rpx;
		height: 842rpx;
		border-radius: 8rpx;
		background: white;

		&-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 686rpx;
			height: 842rpx;
		}

		&-wrap {
			z-index: 1;
		}

		&__portrait {
			margin-top: 70rpx;
			width: 126rpx;
			height: 126rpx;
			border-radius: 126rpx;

			image {
				width: 126rpx;
				height: 126rpx;
				border-radius: 126rpx;
			}
		}

		&__name {
			padding-top: 28rpx;
			color: #000000;
			font-size: 32rpx;
			font-weight: 500;
		}

		&__qrcode {
			margin-top: 46rpx;
			width: 442rpx;
			height: 442rpx;
			border-radius: 24rpx;
			background: #ff710a99;

			&__inner {
				width: 400rpx;
				height: 400rpx;
				border-radius: 24rpx;
				background-color: white;

				.qrimage {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>